import React, { Component } from 'react';
import { Calendar, Picker } from 'antd-mobile';
import {formatDate} from '@/assets/js/methods'

import './Filter.scss'
const now = new Date();
class Filter extends Component {
  originbodyScrollY = document.getElementsByTagName('body')[0].style.overflowY;
  constructor() {
    super()
    this.state = {
      show: false,
      state: 1,
      startTime: '',
      endTime: '',
      config: {
        type: 'one'
      },
    }
  }
  pickerChange(value) {}
  onSelectHasDisableDate = (dates) => {
    console.warn('onSelectHasDisableDate', dates);
  }

  onConfirm = (startTime) => {
    console.log(startTime.getTime())
    document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
    if (this.state.state === 1) {
      this.setState({
        show: false,
        startTime: formatDate(startTime.getTime())
      });
    } else {
      this.setState({
        show: false,
        endTime: formatDate(startTime.getTime())
      });
    }
  }

  onCancel = () => {
    document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
    this.setState({
      show: false,
      startTime: undefined,
      endTime: undefined,
    });
  }
  componentDidMount() {
    document.getElementsByTagName('title')[0].innerHTML = '筛选'
    this.setState({
      startTime: formatDate(new Date().getTime()),
      endTime: formatDate(new Date().getTime())
    })
  }
  render() {
    const district = [
			{
				label: '全部订单',
				value: '1',
			},
			{
				label: '安装订单',
				value: '2',
      },
      {
				label: '维护订单',
				value: '3',
			}
		]
    let height = window.screen.height
    return (
      <div className="Filter-page other-page" style={{minHeight: height + 'px'}}>
        <div className="filter-board">
          <div className="check-time flex y-center space-between">
            <span>查询时间：</span>
            <span className="reset-btn flex y-center x-center">
              <img src={require('../../images/reset.png')} alt=""/>
              <span>重设</span>
            </span>
          </div>

          <div className="time-group flex y-center">
            <div className="time-btn" onClick={() => {
                document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
                this.setState({
                  show: true,
                  state: 1
                });
              }}>{this.state.startTime}</div>
            <img src={require('../../images/arrow.png')} alt=""/>
            <div className="time-btn" onClick={() => {
                document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
                this.setState({
                  show: true,
                  state: 2
                });
              }}>{this.state.endTime}</div>
          </div>

          <div className="check-area flex y-center space-between">
            <span>查询地区：</span>
          </div>
          <div className="position flex y-center">
              <img src={require('../../images/position.png')} alt="" className="position-img"/>
              <div className="area">北京</div>
              <div className="position-btn flex y-center">
                <Picker data={district}
                        cols={1}
                        className="forss"
                        onChange={this.pickerChange.bind(this)}>
                  <span>昭阳区</span>
                </Picker>
                <img src={require('../../images/drawdown.png')} alt=""/>
              </div>
          </div>

          <div className="deadline flex y-center">
            <div className="area">截止日期：</div>
            <div className="area-btn flex y-center">
              <Picker data={district}
                      cols={1}
                      className="forss"
                      onChange={this.pickerChange.bind(this)}>
                <span>一周之内</span>
              </Picker>
              <img src={require('../../images/drawdown.png')} alt=""/>
            </div>
          </div>
        </div>
        
        <div className="long-btn">确定</div>
        <Calendar
          {...this.state.config}
          visible={this.state.show}
          onCancel={this.onCancel}
          onConfirm={this.onConfirm}
          onSelectHasDisableDate={this.onSelectHasDisableDate}
          getDateExtra={this.getDateExtra}
          defaultDate={now}
          minDate={new Date(+now - 5184000000)}
          maxDate={new Date(+now + 31536000000)}
        />
      </div>
    );
  }
}

export default Filter;